<template>
  <div class="row2" v-show="Dheader.header.row2.isRow2Display">
    <div class="col">
      <div class="arrow" @click="roll(-1)">
        <el-icon><IEpArrowLeftBold></IEpArrowLeftBold></el-icon>
      </div>
      <el-scrollbar ref="scrollbarRef">
        <ul class="tabs" id="tabs">
          <li
            :class="
              Daside.settingsGetTabClass +
              (Dheader.header.row2.activateTab == '/home'
                ? ' tab active'
                : ' tab')
            "
            v-router="{ path: '/home' }"
          >
            <span
              ><el-icon v-show="Daside.aside.settings.isTabIconDisplay"
                ><IEpHomeFilled></IEpHomeFilled></el-icon
              >{{ $t("menu.home") }}</span
            >
          </li>
          <li
            v-for="(item, index) in Dheader.header.row2.tabs"
            :key="item"
            :class="
              Daside.settingsGetTabClass +
              (Dheader.header.row2.activateTab == item.to
                ? ' tab active'
                : ' tab')
            "
            v-router="{ path: item.to }"
            @click="jump(index)"
          >
            <span>
              <el-icon v-show="Daside.aside.settings.isTabIconDisplay"
                ><icon :icon="item.icon"></icon> </el-icon
              >{{ $t(item.title) }}</span
            ><el-icon @click.stop="Dheader.row2DeleteTab(item)"
              ><IEpClose></IEpClose
            ></el-icon>
          </li></ul
      ></el-scrollbar>
      <div class="arrow" @click="roll(1)">
        <el-icon><IEpArrowRightBold></IEpArrowRightBold></el-icon>
      </div>
    </div>
    <div class="col">
      <el-dropdown @command="Dheader.row2Command">
        <div class="tabsMenu">
          <el-icon :size="20"><IEpMenu></IEpMenu></el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="1">
              <el-icon :size="20"><IEpclose></IEpclose></el-icon>
              {{ $t("header.row2.command.command1") }}</el-dropdown-item
            >
            <el-dropdown-item command="2" disabled>
              {{ $t("header.row2.command.command2") }}</el-dropdown-item
            >
            <el-dropdown-item command="3" divided>
              <el-icon :size="20"><IEpclose></IEpclose></el-icon>
              {{ $t("header.row2.command.command3") }}</el-dropdown-item
            >
            <el-dropdown-item command="4" divided>
              <el-icon :size="20"><IEpCircleClose></IEpCircleClose></el-icon>
              {{ $t("header.row2.command.command4") }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <div @click="Dheader.fullScreen(1)">
        <el-icon :size="25"
          ><IMdiFullscreenExit
            v-if="Dheader.header.row2.isSubpageFullScreen"
          ></IMdiFullscreenExit
          ><IMdiFullscreen v-else></IMdiFullscreen
        ></el-icon>
      </div>
      <div class="refresh" @click="Dheader.row2Refresh()">
        <el-icon :size="20"><IEpRefresh id="refresh"></IEpRefresh></el-icon>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  // name: "row2",
};
</script>
<script lang="ts" setup>
import { useDheader } from "../../store/Dheader";
import { useDaside } from "../../store/Daside";
import { ElScrollbar } from "element-plus/es";
import _ from "lodash";
const Dheader = useDheader();
const Daside = useDaside();

const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>();
// const tabs = ref();
let j = 0;
const jump = _.throttle((index: number) => {
  let width =
    window.innerWidth < 600
      ? window.innerWidth - 280
      : Daside.aside.isCollapse
      ? window.innerWidth - 346
      : window.innerWidth - 480;

  let scrollWidth = window.dom.id("tabs").scrollWidth;
  let k = (window.dom.querySelector("#tabs .tab")[index + 1] as any).offsetLeft;
  let m = k - j - width / 2;
  if (
    (j <= 0 && k < width / 2) ||
    (j + width >= scrollWidth && scrollWidth - k < width / 2)
  ) {
  } else {
    for (let l = 0; l < Math.abs(m); l++) {
      setTimeout(() => {
        m > 0 ? j++ : j--;
        if (j <= 0 || j >= scrollWidth - width) return;
        scrollbarRef.value!.setScrollLeft(j);
      }, l * 2);
    }
  }
}, 1000);
const roll = _.throttle((index: number) => {
  console.log(1);
  let width =
    window.innerWidth < 600
      ? window.innerWidth - 280
      : Daside.aside.isCollapse
      ? window.innerWidth - 346
      : window.innerWidth - 480;
  let scrollWidth = window.dom.id("tabs").scrollWidth;
  index == 1
    ? (() => {
        if (j < scrollWidth - width) {
          for (let k = 0; k < width / 2; k++) {
            setTimeout(() => {
              if (j >= scrollWidth - width) {
                return;
              }
              j++;
              scrollbarRef.value!.setScrollLeft(j);
            }, k * (2000 / width));
          }
        }
      })()
    : (() => {
        if (j > 0) {
          for (let k = 0; k < width / 2; k++) {
            setTimeout(() => {
              if (j <= 0) return;
              j--;
              scrollbarRef.value!.setScrollLeft(j);
            }, k * (2000 / width));
          }
        }
      })();
}, 2000);
</script>

<style lang="scss" scoped>
.row2 {
  display: flex;
  width: 100%;
  min-width: 380px;
  height: 40px;
  border-bottom: 1px solid rgb(211, 211, 211);

  .col:first-child {
    min-width: 0px;
    flex-grow: 1;
    display: flex;
    align-items: center;
    .arrow {
      width: 40px;
      min-width: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;

      &:first-child {
        border-right: 1px solid rgb(228, 228, 228);
      }
      &:last-child {
        border-left: 1px solid rgb(228, 228, 228);
      }
    }
    .el-scrollbar {
      min-width: 0px;
      flex-grow: 1;
      :deep(.el-scrollbar__bar) {
        display: none;
      }

      .tabs {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        list-style-type: none;
        user-select: none;
        .tab {
          height: 20px;
          margin-left: 5px;
          font-size: 13px;
          border-radius: 3px;
          border: 2px solid rgb(160, 160, 160);
          display: flex;
          align-items: center;
          cursor: pointer;
          position: relative;

          span {
            display: flex;
            align-items: center;
            margin: 0px 5px;
            white-space: nowrap;
          }

          .el-icon {
            margin-right: 5px;
            width: 0px;
            transition: all 0.66s ease;
            opacity: 0;
            &:first-child {
              width: 15px;
              opacity: 1;
            }
          }
          &::after {
            content: "";
            transition: 0s ease;
          }
          &:hover {
            .el-icon:last-child {
              width: 15px;
              opacity: 1;
              color: var(--theme-color);
            }
          }
          &.active {
            span {
              color: var(--theme-color);
            }
            .el-icon:last-child {
              width: 15px;
              opacity: 1;
              color: var(--theme-color);
            }
          }
        }
        .transform {
          &::before,
          &::after {
            content: "";
            position: absolute;
            width: 15%;
            height: 5px;
            background-color: #ffffff;
            /* 沿X轴倾斜30° */
            transform: skewX(30deg);
            transition: 0.66s linear;
          }
          &::before {
            top: -5px;
            left: 10%;
          }
          &::after {
            bottom: -5px;
            right: 10%;
          }
          &:hover::before {
            left: 80%;
          }
          &:hover::after {
            right: 80%;
          }
          &.active {
            &::before {
              left: 80%;
            }
            &::after {
              right: 80%;
            }
          }
        }

        .nimble {
          border: 0px;
          &::after {
            content: "";
            position: absolute;
            width: 0%;
            height: 2px;
            top: 20px;
            left: 0%;
            background-color: var(--theme-color);
            transition: 1s ease;
          }
          &:hover {
            &::after {
              width: 100%;
            }
          }
          &.active {
            border-bottom: 2px;
            &::after {
              width: 100%;
            }
          }
        }
        .tabcard {
          position: relative;
          height: 20px !important;
          margin-left: -5px;
          // border: 1px solid var(--theme-color);
          border-bottom: 0px;
          border-radius: 10px 5px -5px -5px;
          &:first-child {
            margin-left: 10px;
            // background-color: #000;
          }
          &.active {
            border-bottom: 0px;
            z-index: 5;
            background-color: rgb(249, 182, 182);
          }
        }
      }
    }
  }
  .col:last-child {
    display: flex;
    align-items: center;
    min-width: 120px;
    & > * {
      flex: 1;
      align-self: stretch;
      display: flex;
      align-items: center;
      justify-content: center;
      border-left: 1px solid rgb(183, 181, 181);
      &:hover {
        cursor: pointer;
      }
    }
    .tabsMenu {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .el-icon {
        transition: all 0.66s ease;
        transition-delay: 0.33s;
      }
      &:hover {
        .el-icon {
          transform: rotate(45deg) scale(1.1);
          color: var(--theme-color);
          transition-delay: 0s;
        }
      }
    }
  }
}
</style>
